<template lang="html">
    <div class="boutiquedetails">
      <div class="details_box">
        <div class="details_main">
          <h2 class="commodity_name">{{detailsimg.title}}</h2>
          <h3 class="commodity_price"><span>￥</span>{{detailsimg.price}}</h3>
          <h4 class="commodity_freight"><span>运费</span>{{detailsimg.freight}}</h4>
          <div class="num_box">
            <p class="commodity_num">数量</p>
            <ul class="num_main">
              <li @click='greet()'>-</li>
              <li class="num_details">{{counter}}</li>
              <li @click='add()'>+</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="commodity_details" @click="show()"><span v-if="detailshow">查看详情</span></div>
      <div class="details_img" v-if="detailshow==false">
        <img v-for="itme in jianjie_list" :src="itme">
      </div>
    </div>
</template>
<script type="text/javascript">
  export default {
    props:['detailsimg'],
    data(){
      return{
        counter: 1,
        jianjie_list:[],
        detailshow:true
      }
    },
    components:{
    },
    methods:{
      greet:function() {
        if(this.counter<2){
          return false;
        };
        this.counter --;
        this.$emit('listenToChildEvent',this.counter);
      },
      add:function() {
        this.counter ++;
        this.$emit('listenToChildEvent',this.counter);
      },
      show:function(){
        let conent = this;
        if (conent.detailsimg.jianjie_list) {
          conent.jianjie_list=conent.detailsimg.jianjie_list.split(",");
        } 
        conent.detailshow=false;
      }
    }
  }
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.boutiquedetails{
  .carousel-wrap{
   height: 61vw;
  }
  .details_box{
    text-align: left;
    width: 100vw;
    border-bottom: solid 1vw @colcr4;
  }
  .details_main{
    width: @width;
    margin: 0 auto;
  }
  .commodity_name{
    margin: 5vw 0vw 3vw 0vw;
    font-size:@h1_font_size; 
    color: @color7;
  }
  .commodity_price{
    font-size: @h2_font_size;
    color: @color;
    span{
      font-size: @h5_font_size;
      color: @color3;
    }
  }
  .commodity_freight{
    font-size:@h5_font_size;
    color: @color3;
    height: 12vw;
    line-height: 12vw;
    span{
      font-size:@h1_font_size;
      color: @color7;
      display: inline-block;
      margin-right: 2vw;
    }
  }
  .num_box{
    margin: 3vw 0 3vw 0;
    font-size:@h1_font_size;
    overflow: hidden;
    zoom:1;
    .commodity_num{
      height: 8vw;
      line-height: 8vw;
      color: @color7;
      display: inline-block;
    }
    .num_main{
      float: right;
      width: 40vw;
      text-align: center;
      overflow: hidden;
      zoom:1;
      li{
        width: 13.33vw;
        height: 8vw;
        line-height: 8vw;
        font-size:@h4_font_size;
        float: left;
        background-color: @color;
        color: @color1;
        border-radius: 1vw;
      }
      .num_details{
        background-color: transparent;
        color: @color7;
      }
    }
  }
  .commodity_details{
    width: 100vw;
    height: 11vw;
    line-height: 11vw;
    font-size:@h3_font_size;
  }
}
</style>